<template>
  <div>
    <el-card class="introduce">
      <template v-slot:header>
        <div class="card-header">
          <el-button class="button" @click="onCreate" size="mini" type="text"
            >创建服务</el-button
          >
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="serviceName" label="服务名称" width="150" />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          :formatter="(r) => getStatusName(r.status, r.isOut)"
          width="120"
        />
        <el-table-column
          prop="status"
          label="MTP"
          align="center"
          :formatter="(r) => (r.status & 4 ? '已注册' : '未注册')"
          width="120"
        />
        <el-table-column prop="isAutoRun" align="center" label="自启动" width="120">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isAutoRun"
              :beforeChange="onAutoRun(scope.row)"
              :disabled='scope.row.isOut'
              active-color="#13ce66"
              inactive-color="#ff4949"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </template>
        </el-table-column>
        <el-table-column width="180" align="center" prop="proxyUrl" label="访问地址" />
        <el-table-column prop="information" label="注册信息" />
        <el-table-column width="200" label="操作">
          <template #default="scope">
            <div v-if='scope.row.isOut'></div>
            <template v-else-if="!scope.row.hasRunService">
              <el-button
                type="primary"
                size="mini"
                @click="handle(scope.$index, scope.row, 'version')"
                >版本</el-button
              >
              <el-dropdown
                style="margin-left: 8px"
                trigger="click"
                @command="(command) => handle(scope.$index, scope.row, command)"
              >
                <el-button size="mini">
                  更多
                  <el-icon><arrow-down /></el-icon
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="config">配置</el-dropdown-item>
                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else-if="(scope.row.status & 1) > 0">
              <el-button
                size="mini"
                type="warning"
                :loading="(scope.row.status & 2) > 0"
                @click="handle(scope.$index, scope.row, 'restart')"
                >重启</el-button
              >
              <el-dropdown
                trigger="click"
                style="margin-left: 8px"
                @command="(command) => handle(scope.$index, scope.row, command)"
              >
                <el-button size="mini">
                  更多
                  <el-icon size="mini"><arrow-down /></el-icon
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :disabled="(scope.row.status & 2) > 0"
                      command="stop"
                      >停止</el-dropdown-item
                    >
                    <el-dropdown-item command="version">版本</el-dropdown-item>
                    <el-dropdown-item command="config">配置</el-dropdown-item>
                    <el-dropdown-item command="log">日志</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <el-button
                size="mini"
                type="primary"
                :loading="(scope.row.status & 2) > 0"
                @click="handle(scope.$index, scope.row, 'start')"
                >启动</el-button
              >
              <el-dropdown
                style="margin-left: 8px"
                trigger="click"
                @command="(command) => handle(scope.$index, scope.row, command)"
              >
                <el-button size="mini">
                  更多
                  <el-icon><arrow-down /></el-icon
                ></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="version">版本</el-dropdown-item>
                    <el-dropdown-item command="config">配置</el-dropdown-item>
                    <el-dropdown-item command="log">日志</el-dropdown-item>
                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="showDialog" :title="dialogTitle" width="1024px">
      <el-tabs v-model="showType" style="margin-top: -30px">
        <el-tab-pane label="版本库" name="1"
          ><Versions
            v-if="showType == 1"
            :serviceName="showType == 1 ? serviceName : ''"
            @runFromVersion="runFromVersion"
        /></el-tab-pane>
        <el-tab-pane label="配置" name="2"
          ><Config v-if="showType == 2" :serviceName="showType == 2 ? serviceName : ''"
        /></el-tab-pane>
        <el-tab-pane label="日志" name="3">
          <Log v-if="showType == 3" :serviceName="showType == 3 ? serviceName : ''"
        /></el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script lang="jsx">
import { reactive, toRefs, onMounted } from "vue";
import Versions from "./Versions.vue";
import Log from "./Log.vue";
import Config from "./Config.vue";
import { ElMessageBox } from "element-plus";
export default {
  name: "",
  components: { Versions, Log, Config },
  computed: {
    dialogTitle() {
      let title = "";
      if (this.showType == 3) {
        title = "的日志";
      }
      if (this.showType == 2) {
        title = "的配置";
      }
      if (this.showType == 1) {
        title = "的版本库";
      }
      return this.serviceName + title;
    },
  },
  setup() {
    const state = reactive({
      showDialog: false,
      showType: 0,
      serviceName: "",
      loading: true,
      tableData: [],
    });
    const reader = function () {
      $.get("/api/guardian/getServices").then((r) => {
        $.get("/api/micro/getRegistries").then((res) => {
          state.loading = false;
          r.data.forEach((element) => {
            element.isOut = false;
            var d = res.data.filter((a) => a.serviceName == element.serviceName)[0];
            if (d) {
              if (d.information)
                element.information = "mtp://" + d.remoteIP + ":" + d.information;
              element.proxyUrl = d.proxyUrl;
              element.remoteIP = d.remoteIP;
            }
          });
          res.data.forEach((element) => {
            if (!r.data.some((a) => a.serviceName == element.serviceName)) {
              element.status = 4;
              element.isOut = true;
            
              if (element.information)
                element.information = "mtp://" + element.remoteIP + ":" + element.information;
 
       
              r.data.push(element);
            }
          });

          state.tableData = r.data;
        });
      });
    };
    const start = (serviceName) => $.get("/api/guardian/run", { serviceName });

    const stop = (serviceName) => $.get("/api/guardian/kill", { serviceName });

    const restart = (serviceName) => stop(serviceName).then((r) => start(serviceName));

    const createService = (serviceName) => $.get("/api/guardian/create", { serviceName });

    const deleteService = (serviceName) => $.get("/api/guardian/delete", { serviceName });

    onMounted(() => {
      reader();
    });

    return {
      ...toRefs(state),
      getStatusName(status, isOut) {
        if (isOut) {
          return "未知";
        }
        const doing = status & 2;
        if (status & 1) {
          if (doing) return "启动中";
          return "已启动";
        } else {
          if (doing) return "停止中";
          return "未启动";
        }
      },
      onAutoRun(item) {
        return function () {
          return $.get("api/guardian/SetAutoRun", {
            serviceName: item.serviceName,
            isAutoRun: !item.isAutoRun,
          });
        };
      },
      handle(i, item, command) {
        state.serviceName = item.serviceName;
        switch (command) {
          case "start":
            state.tableData[i].status = item.status | 2;
            start(item.serviceName).finally(reader);
            break;
          case "stop":
            state.tableData[i].status = item.status | 2;
            stop(item.serviceName).finally(reader);
            break;
          case "restart":
            state.tableData[i].status = item.status | 2;
            restart(item.serviceName).finally(reader);
            break;
          case "delete":
            ElMessageBox.confirm("确认删除", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
            }).then((r) => {
              deleteService(item.serviceName).finally(reader);
            });
            break;
          case "version":
            state.showType = "1";
            state.showDialog = true;
            break;
          case "config":
            state.showType = "2";
            state.showDialog = true;
            break;
          case "log":
            state.showType = "3";
            state.showDialog = true;
            break;
        }
      },
      runFromVersion(vname) {
        state.showDialog = false;
        reader();
      },
      deleteVersion(vname) {},
      onCreate() {
        ElMessageBox.prompt("请输入服务名称", "添加服务", {
          confirmButtonText: "添加",
          cancelButtonText: "取消",
          inputPattern: /.+/,
          inputErrorMessage: "服务名称必填",
        }).then(({ value }) => {
          createService(value)
            .then((r) => {
              ElMessageBox.confirm("服务创建成功，是否上传版本", "提示", {
                confirmButtonText: "去上传",
                cancelButtonText: "稍后再说",
              }).then((r) => {
                state.serviceName = value;
                state.showType = "1";
                state.showDialog = true;
              });
            })
            .finally(reader);
        });
      },
      tableRowClassName(e) {
        if (e.row.status & 1) {
          return "success-row ";
        } else {
          return "warning-row";
        }
      },
    };
  },
};
</script>
<style>
.el-table .warning-row {
  --el-table-tr-background-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
  --el-table-tr-background-color: var(--el-color-success-lighter);
}
</style>
